<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../common.css" />
		<style>
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				background: #222;
			}

			.loader {
				position: relative;
				width: 200px;
				height: 200px;
				overflow: hidden;
				-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
			}

			.loader:hover {
				background: orange;
				box-shadow: 0 0 5px orange,
					0 0 25px orange,
					0 0 50px orange,
					0 0 200px orange;
			}

			.loader span {
				position: absolute;
				display: block;
			}

			.loader span:nth-child(1) {
				top: 0;
				left: 0;
				width: 100%;
				height: 40px;
				background: linear-gradient(90deg, transparent, orange);
				animation: animate1 1s linear infinite;
				animation-delay: 0;
			}

			@keyframes animate1 {
				0% {
					left: -100%;
				}

				100% {
					left: 100%;
				}
			}

			.loader span:nth-child(3) {
				bottom: 0;
				left: -100%;
				width: 100%;
				height: 40px;
				background: linear-gradient(270deg, transparent, orange);
				animation: animate3 1s linear infinite;
				animation-delay: 0;
			}

			@keyframes animate3 {
				0% {
					left: 100%;
				}

				100% {
					left: -100%;
				}
			}

			@keyframes animate1 {
				0% {
					left: -100%;
				}

				100% {
					left: 100%;
				}
			}

			.loader span:nth-child(2) {
				right: 0;
				top: -100%;
				width: 40px;
				height: 100%;
				background: linear-gradient(180deg, transparent, orange);
				animation: animate2 1s linear infinite;
				animation-delay: 0.5;
			}

			@keyframes animate2 {
				0% {
					top: -100%;
				}

				100% {
					top: 100%;
				}
			}

			.loader span:nth-child(4) {
				left: 0;
				top: 100%;
				width: 40px;
				height: 100%;
				background: linear-gradient(0deg, transparent, orange);
				animation: animate4 1s linear infinite;
				animation-delay: 0.5s;
			}

			@keyframes animate4 {
				0% {
					top: 100%;
				}

				100% {
					top: -100%;
				}
			}
		</style>
	</head>

	<body>
		<div class="loader">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</body>

</html>
